<template>
    <div class="home-container">
        <div class="carousel">
            <carouselComponet></carouselComponet>
        </div>

        <div class="container">
            <div class="left-bar">
                <!-- default-active属性接收string类型参数 -->
                <el-menu :default-active="'' + currentCategoryIndex" @select="handleMenuChange">
                    <div v-for="(c, index) in categorys" :key="c.id">
                        <!-- index属性接收string类型参数 -->
                        <el-menu-item :index="'' + index">
                            <span slot="title">{{c.display}}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </div>
            <div class="main-wrapper">
                <el-row>
                    <h4>{{ currentCategoryDisplay }}</h4>
                    <el-divider></el-divider>
                </el-row>
                <div class="main-container">
                    <div v-for="deb in curDebList" :key="deb.deb_id" class="deb-item">
                        <debItemComponent :deb="deb" @click.native="gotoDetail(deb.deb_id)"></debItemComponent>
                    </div>
                </div>
                <el-row type="flex" justify="center">
                    <el-pagination
                        class="pagination"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="18"
                        layout="prev, pager, next, jumper"
                        :total="total"
                    ></el-pagination>
                </el-row>
            </div>
            <div class="right-bar">
                <h4>最新上传</h4>
                <el-divider></el-divider>
                <div class="right-container">
                    <div v-for="deb in latestDebList" :key="deb.deb_id" class="right-deb-item">
                        <smallDebItemComponet :deb="deb" @click.native="gotoDetail(deb.deb_id)"></smallDebItemComponet>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getDebListByCategory,
    getDebListByUploadDate,
} from "../util/myRequests";
// import categoryItemComponent from "../components/categoryItem";
import debItemComponent from "../components/debItem";
import smallDebItemComponet from "../components/smallDebItem";
import carouselComponet from "../components/carousel";
export default {
    name: "home",
    components: { debItemComponent, smallDebItemComponet, carouselComponet },
    data() {
        return {
            currentPage: 0,
            // currentCategoryIndex: 0
        };
    },
    computed: {
        currentCategoryIndex() {
            return this.$store.state.currentCategoryIndex;
        },
        categorys() {
            return this.$store.state.categoryList;
        },
        currentCategoryDisplay() {
            // 此处赋值不可缺少，因为控件需要string类型，此时已不再是双向绑定
            if (this.categorys == 0 || this.categorys.length == 0) return "";
            var index = this.currentCategoryIndex;
            return this.categorys[this.currentCategoryIndex].display;
        },
        curDebList() {
            return this.$store.state.homePageDebList;
        },
        total() {
            return this.$store.state.homePageDebTotal;
        },
        latestDebList() {
            return this.$store.state.latestDebList;
        },
    },
    mounted() {
        getDebListByUploadDate().then((list) => {
            this.$store.commit("setLatestDebList", list);
        });
    },
    methods: {
        handleMenuChange(val) {
            this.$store.commit("setCurrentCategoryIndex", val);
            this.changeDebList(this.categorys[val].id, 1);
        },
        handleCurrentChange(val) {
            var categoryId = this.categorys[this.currentCategoryIndex].id;
            this.changeDebList(categoryId, val);
        },
        changeDebList(categoryId, page) {
            getDebListByCategory(categoryId, page)
                .then((res) => {
                    this.$store.commit("setHomePageDebList", res);
                })
                .catch((error) => console.log(error));
        },
        gotoDetail(debId) {
            this.$router.push({ path: "detail/" + debId });
        },
    },
};
</script>

<style>
.container {
    display: grid;
    grid-template-columns: 1fr 5fr 2fr;
    justify-items: center;
    justify-content: center;
}

.main-wrapper {
    width: 100%;
}

.main-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 80px);
    column-gap: 12px;
    row-gap: 8px;
}

.right-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(20, 40px);
    row-gap: 24px;
}

.deb-item {
    height: 80px;
    cursor: pointer;
}

.right-deb-item {
    width: 100%;
    height: 40px;
    cursor: pointer;
}

.menu-item {
    height: 40px;
}

.pagination {
    margin-top: 16px;
}
</style>